<template>
  <div class="header-sty">
    <!-- login img-title -->
    <!-- <el-link style="color: #FFFFFF;" title="点击打开/关闭菜单" @click="isShowmenu"><i class="iconfont icon-caidan" style="position: absolute;left: -33px;font-size: 23px;top: -8px;"></i></el-link> -->
    <div style="display: flex;justify-content: space-around;align-items: center;">
      <img class="header-img" src="../../assets/img/home/logo.png" />
      <span class="header-title">中药先进制药与信息化技术融合</span>
    </div>

    <!-- 分类list -->
    <div class="header-catalog-div">
      <ul class="header-ul" >
        <li v-for="(item,index) in lableList">
           <el-link type="success" :class="{'active':index == activeIndex1}" @click="itemClick(item,index)" >{{item.t.menuName}}</el-link>
        </li>
      </ul>
    </div>


    <!-- admin -->
    <div class="header-admin">
     <i class="iconfont icon-renyuan-05" style="display: block;color: #FFFFFF;font-size: 26px;"></i>
     <el-link type="success" style="font-size: 18px;margin-left: 5px;color: white;margin-right: 5px;" :underline="false" @click="loginOut">{{this.username}}</el-link>
     <a href="#" class="iconfont icon-quit" style="display: block;color: #FFFFFF;font-size: 24px;" @click="loginOut"></a>
    </div>
  </div>
</template>

<script>
  import mixins from '@/mixins.js'
  import Encrypt from '@/common/utils/encrypt'
  export default{
    mixins:[mixins],
    // 后台首页 头
    name:"Header",
    props:{
      lableList:Array
    },
    data(){
      return{
        catalog:[],
        // activeIndex:0
        catalogList:[],
        // username
        username:'',
        activeIndex1:''
      }
    },
    methods:{
      itemClick(item,index){
        this.activeIndex1 = index
        // this.setActiveIndex(index)
        this.$emit('theRouter', index)

        //将活跃的id存放到Vuex里面
        this.setActiveIndex(index)

        this.$router.push({
          path:item.t.menuUrl
        }).catch(()=>{})
      },

        // 退出登录
      loginOut(){
        this.$XModal.confirm('您确定要注销登陆？').then(type => {
          if(type === "confirm"){
            // 清除token
            localStorage.clear("utoken")
            localStorage.clear("authorization_name")
            localStorage.clear("uname")
            localStorage.clear("activeIndex")
            
            sessionStorage.clear("routerList")
            // 路由跳转
            this.$router.push({
              path:"/login"
            })
          }
        })
      }
    },
    created() {
      //这里从Vuex里面获取到存储的activeIndex
      var theIndex  = localStorage.getItem("activeIndex")  ? true : false
      if(theIndex){
        this.activeIndex1 =  Encrypt.decryptCBC(localStorage.getItem("activeIndex"))
      }
    },
    updated() {
      var uname = localStorage.getItem('uname')
      this.username = uname
    },
  }
</script>

<style scoped="scoped">
  .header-sty{
    height: 60px;
    padding: 10px 40px;
    min-width: 1200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: #2196e0; */
    background: linear-gradient(to bottom,#7ec9ee, 50%, #2196e0);
  }
  .header-img{
    height: 40px;
  }
  .header-title{
    padding: 0 10px;
    display: block;
    font-family: '华文新魏 Bold', '华文新魏';
    font-weight: 700;
    font-size: 30px;
  }
  .header-catalog-div{
    height: 100%;
    margin-left:20px ;
  }
  .header-ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    list-style: none;
  }
  .header-ul li a{
    height: 100%;
    line-height: 80px;
    padding: 0px 15px;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
    display: block;
  }
  .header-ul li:hover{
    color: #FFFFFF;
    background-color: #67C23A;
    border-bottom: #FFFFFF;
  }
  .header-ul li a:hover{
    color: #FFFFFF;
  }
  .active{
    color: #FFFFFF;
    background-color: #67C23A;
  }

  .header-admin{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 30px;
  }

  .header-admin span{
    padding: 0 5px;
    color: #666;
    font-size: 19px;
  }

  @media screen and (max-width: 1400px) {
    .header-title{
      font-size: 20px;
    }
    .header-ul li a{
      font-size: 16px;
    }
  }
</style>
